<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe嵌入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .example-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f9f9f9;
        }
        
        .example-title {
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 15px;
        }
        
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
            margin: 10px 0;
        }
        
        .iframe-demo {
            border: 2px solid #1e3a8a;
            border-radius: 8px;
            margin: 20px 0;
            display: inline-block;
        }
        
        .note {
            background: #e3f2fd;
            border-left: 4px solid #1e3a8a;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .feature {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #1e3a8a;
        }
        
        .feature h3 {
            color: #1e3a8a;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📁 文件列表 Iframe 嵌入示例</h1>
        
        <div class="note">
            <strong>说明：</strong> 这个页面展示了如何在其他网站中嵌入文件列表的iframe组件。
            iframe尺寸为400×300像素，显示最新的5个文件，点击文件名可直接下载。
        </div>
        
        <div class="features">
            <div class="feature">
                <h3>🎯 核心功能</h3>
                <ul>
                    <li>显示最新5个文件</li>
                    <li>自动隐藏文件后缀</li>
                    <li>智能时间显示</li>
                    <li>点击直接下载</li>
                </ul>
            </div>
            
            <div class="feature">
                <h3>📱 响应式设计</h3>
                <ul>
                    <li>固定尺寸400×300</li>
                    <li>自适应内容布局</li>
                    <li>美观的滚动条</li>
                    <li>悬停效果</li>
                </ul>
            </div>
            
            <div class="feature">
                <h3>⚡ 性能优化</h3>
                <ul>
                    <li>自动刷新数据</li>
                    <li>轻量级设计</li>
                    <li>快速加载</li>
                    <li>低资源占用</li>
                </ul>
            </div>
        </div>
        
        <div class="example-section">
            <div class="example-title">1. 基本嵌入代码（同域）</div>
            <div class="code-block">
&lt;iframe src="http://your-domain.com/iframe" 
        width="400" 
        height="300" 
        frameborder="0" 
        scrolling="no"&gt;
&lt;/iframe&gt;
            </div>
        </div>

        <div class="example-section">
            <div class="example-title">2. 跨域嵌入代码</div>
            <div class="code-block">
&lt;iframe src="http://your-domain.com/iframe-cors" 
        width="400" 
        height="300" 
        frameborder="0" 
        scrolling="no"&gt;
&lt;/iframe&gt;
            </div>
            <div class="note">
                <strong>注意：</strong> 跨域嵌入时，确保目标服务器已配置CORS头部支持
            </div>
        </div>
        
        <div class="example-section">
            <div class="example-title">3. 带样式的嵌入代码</div>
            <div class="code-block">
&lt;iframe src="http://your-domain.com/iframe" 
        width="400" 
        height="300" 
        frameborder="0" 
        scrolling="no"
        style="border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"&gt;
&lt;/iframe&gt;
            </div>
        </div>
        
        <div class="example-section">
            <div class="example-title">4. 响应式嵌入代码</div>
            <div class="code-block">
&lt;div style="position: relative; width: 100%; max-width: 400px; height: 300px;"&gt;
    &lt;iframe src="http://your-domain.com/iframe" 
            width="100%" 
            height="100%" 
            frameborder="0" 
            scrolling="no"&gt;
    &lt;/iframe&gt;
&lt;/div&gt;
            </div>
        </div>
        
        <div class="example-section">
            <div class="example-title">5. 实际效果预览</div>
            <p>下面是在线演示效果：</p>
            <div class="iframe-demo">
                <iframe src="http://localhost:3000/iframe" 
                        width="400" 
                        height="300" 
                        frameborder="0" 
                        scrolling="no">
                </iframe>
            </div>
            <p style="margin-top: 1rem; font-size: 0.9rem; color: #666;">
                跨域版本演示：<a href="http://localhost:3000/iframe-cors" target="_blank">/iframe-cors</a>
            </p>
        </div>
        
        <div class="example-section">
            <div class="example-title">6. 使用注意事项</div>
            <ul>
                <li><strong>同域嵌入：</strong> 使用 <code>/iframe</code> 页面，适用于同域名下的嵌入</li>
                <li><strong>跨域嵌入：</strong> 使用 <code>/iframe-cors</code> 页面，支持跨域访问</li>
                <li><strong>CORS支持：</strong> 跨域访问需要服务器配置正确的CORS头部</li>
                <li><strong>尺寸调整：</strong> 可以根据需要调整width和height属性</li>
                <li><strong>样式定制：</strong> 可以通过CSS或style属性自定义iframe的外观</li>
                <li><strong>内容更新：</strong> iframe内容每5分钟自动刷新一次</li>
                <li><strong>下载功能：</strong> 点击文件名会在新窗口打开下载</li>
            </ul>
        </div>
        
        <div class="note">
            <strong>技术特点：</strong> 
            这个iframe组件使用纯HTML/CSS/JavaScript开发，无需额外依赖，
            可以轻松嵌入到任何支持iframe的网站中。组件会自动获取最新的文件列表，
            并提供美观的用户界面和流畅的交互体验。
        </div>
    </div>
</body>
</html> 